<!--
!customRef() 的作用：
  Vue 3 提供的一个工具函数，用于创建自定义的响应式 ref。通过它，你可以控制 ref 的 依赖追踪 和 触发更新 的行为，适合需要对数据更新进行细粒度控制的场景，比如 防抖、节流、格式化 等。

!使用场景
  1、customRef() 的主要作用是增强对 ref 的更新逻辑控制，以下是常见场景：
  2、防抖和节流
  3、格式化输入值
  4、监听更新并增加逻辑

!customRef() 的核心在于：
  1、手动控制响应式的 track() 和 trigger()。
  2、实现灵活的响应式逻辑。

!customRef 是用来创建完全自定义的响应式 ref，它需要你提供 get 和 set 方法，并在适当的时机调用 Vue 提供的 track 和 trigger。
方法	      功能
get	        在读取值时调用，返回当前值，同时调用 track 注册依赖。
set	        在更新值时调用，处理新值并调用 trigger 通知依赖更新。
track	      用于记录依赖关系（如组件渲染函数或 watchEffect）。
trigger	    用于通知依赖更新（重新运行依赖的副作用函数）。
-->
<template>
  <div id="wrap">
    <h1>customRef()</h1>
    <input type="text" v-model="text">
    <button @click="editCustomRef">修改自定义ref对象（防抖）</button>
    <hr>

    <input type="text" v-model="text1">
    <p>{{ text1 }}</p>
    <hr>

    <input type="text" v-model="text2" placeholder="请输入内容...">
    <p>{{ text2 }}</p>
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo28',
};
</script>

<script lang="ts" setup>
// import { useDebouncedRef,useUpperCaseRef,useDelayedRef } from '../../utils/UtilsFunction';
import { useDebouncedRef,useUpperCaseRef,useDelayedRef } from  '@/utils/UtilsFunction'
// 防抖输入的实现
const text = useDebouncedRef('练习时长两年半',2000)
const editCustomRef = () => {
  text.value = '鸡，你太美'
}

//格式化输入值
const text1 = useUpperCaseRef('hello world')

//延迟一定时间更新值，用于节约性能消耗
const text2 = useDelayedRef('',1000)// 使用自定义 ref，延迟 3000 毫秒更新
</script>

<style lang="scss"></style>
